<template>
    <div class="know-tag-page">
        <div class="know-tag-title">
            <el-button type="primary" @click="openTag('add')">
                <svg class="add-icon">
                    <use xlink:href="#keowledge-xinjian"></use>
                </svg>
                {{ $t('message.buttons.addLabel') }}
            </el-button>
        </div>
        <el-table :data="tableData" header-row-class-name='table-header-class' style="height:calc(100% - 88px);"
            v-loading="tbleLoading">
            <el-table-column prop="tagName" :label="$t('message.table.tagName')"></el-table-column>
            <el-table-column prop="createBy" :label="$t('message.table.color')">
                <template #default="scope">
                    <div class="tag-colour" :style="{ 'background-color': scope.row.colour }"></div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" :label="$t('message.table.createTime')" />
            <el-table-column :label="$t('message.table.operation')" width="120px">
                <template #default="scope">
                    <div class="actions">
                        <el-button type="text"
                            @click="openTag('edit', scope.row)">{{ $t('message.buttons.edit') }}</el-button>
                        <div class="line"></div>
                        <el-button type="text" class="button-danger"
                            @click="delTag(scope.row.id)">{{ $t('message.buttons.delete') }}</el-button>
                    </div>
                </template>
            </el-table-column>
            <template #empty>
                <jvs-empty></jvs-empty>
            </template>
        </el-table>
        <div class="know-tag-page-box">
            <el-pagination background layout="prev, pager, next" :total="pageObj.total" :page-size="pageObj.size"
                v-model:current-page="pageObj.current" @current-change="handleCurrentChange" />
        </div>
    </div>
    <el-dialog v-model="tagAddVisible" class="custom-dialog" width="482px" :show-close='false'
        :close-on-click-modal="false" modal-class="dialog-center" :before-close="handleClose">
        <div class="custom-dialog-header">
            <div class="title-box">
                <div class="title">{{ tagType == 'add' ? $t('message.text.addNewLabel') : $t('message.text.editLabel') }}</div>
            </div>
            <svg class="close-icon" @click="handleClose">
                <use xlink:href="#keowledge-danchuangguanbi1"></use>
            </svg>
        </div>
        <div class="tag-dialog-body">
            <el-form :model="tagForm" :rules="tagRules" size="large" ref="tagFormRef">
                <el-form-item prop="tagName">
                    <div class="custom-form-title"><span class="require">*</span>{{ $t('message.form.labelName') }}</div>
                    <el-input v-model="tagForm.tagName" :placeholder="$t('message.placeholder.pleaseLabelName')" />
                </el-form-item>
                <el-form-item prop="colour">
                    <div class="custom-form-title"><span class="require">*</span>{{ $t('message.form.labelColor') }}</div>
                    <div class="colour-boxs">
                        <!-- <div class="checked-colour" :style="{background:tagForm.colour}"></div> -->
                        <div class="colour-items">
                            <div class="colour-item" :style="{ background: item }"
                                :class="[tagForm.colour == item && 'active']" v-for="(item, index) in badgeList"
                                :key="index" @click="changeColour(item)">
                                <i class="knowledge-iconfont checked-icon keowledge-xuanzhong"
                                    v-if="tagForm.colour == item"></i>
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="custom-dialog-footer">
                <el-button @click="handleClose">{{ $t('message.buttons.cancal') }}</el-button>
                <el-button type="primary" @click="handleSave">{{ $t('message.buttons.submit') }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    getCurrentInstance
} from 'vue'

import { useRouter } from "vue-router"
import type { FormRules } from 'element-plus'
import { getTagAlls, deleteDocTag, oneEditTag } from '@/api/tag'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const router = useRouter();
const { proxy } = getCurrentInstance()
const pageObj = ref({
    current: 1,
    size: 30,
    total: 0
})
const tbleLoading = ref(false)
const tableData = ref([])
const tagAddVisible = ref(false)
const tagType = ref('')
const tagFormRef = ref()
const tagForm = ref({
    id: '',
    tagName: '',
    colour: '#56ABFB'
})
const tagRules = ref<FormRules<typeof tagForm>>({
    tagName: [{
        validator: (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error($t('message.placeholder.pleaseLabelName')))
            } else {
                callback()
            }
        }, trigger: 'blur'
    }],
    colour: []
})
const badgeList = ['#56ABFB', '#5DCFFF', '#5BE2EE', '#40E0C3', '#3DD1AE', '#A9E072', '#84E17E', '#73D897', '#F4D66D', '#868AF6', '#9A7EF4', '#D287F8', '#F693E7', '#FB7FB7', '#FB7894', '#FA8888', '#FF9F73', '#F6C659']
onMounted(() => {
    getTags()
})
function getTags() {
    tbleLoading.value = true
    getTagAlls({
        size: pageObj.value.size,
        current: pageObj.value.current
    }).then(res => {
        if (res.data.code == 0) {
            tbleLoading.value = false
            tableData.value = res.data.data.records
            pageObj.value.total = res.data.data.total
        }
    }).catch(() => {
        tbleLoading.value = false
    })
}
function openTag(type: string, item: any) {
    tagType.value = type
    tagAddVisible.value = true
    if (item) {
        tagForm.value = JSON.parse(JSON.stringify(item))
    }
}
function delTag(id) {
    proxy.$confirm($t('message.confirm.delLabel'), $t('message.prompt'), {
        confirmButtonText: $t('message.buttons.submit'),
        cancelButtonText: $t('message.buttons.cancal'),
        type: 'warning'
    }).then(() => {
        deleteDocTag(id).then(res => {
            if (res.data.code == 0) {
                proxy.$notify({
                    title: $t('message.message.delLabel'),
                    message: $t('message.message.actionSuccess'),
                    type: 'success',
                    position: 'bottom-right'
                })
                getTags()
            }
        })
    }).catch(() => { });

}
function handleCurrentChange() {
    getTags()
}
function handleClose() {
    tagForm.value = {
        id: '',
        tagName: '',
        colour: '#56ABFB'
    }
    tagFormRef.value.resetFields()
    tagAddVisible.value = false
}
function changeColour(item: string) {
    tagForm.value.colour = item
}
function handleSave() {
    tagFormRef.value.validate(valid => {
        if (valid) {
            oneEditTag({
                ...tagForm.value,
            }).then(res => {
                handleClose()
                getTags()
                proxy.$notify({
                    title: tagType.value == 'add' ? $t('message.text.addLabel') : $t('message.text.editLabel'),
                    message: $t('message.message.actionSuccess'),
                    type: 'success',
                    position: 'bottom-right'
                })
            }).finally(e => {
            })
        }
    })
}
</script>
<style lang="scss" scoped>
.know-tag-page {
    @include SourceHanSansCN-Regular;
    padding: 8px 24px;
    height: calc(100% - 16px);

    .know-tag-title {
        margin-bottom: 16px;

        .add-icon {
            width: 14px;
            height: 14px;
            margin-right: 4px;
        }
    }

    ::v-deep(.el-scrollbar__view) {
        height: 100%;
    }

    ::v-deep(.table-header-class) {
        color: #363B4c;
        @include SourceHanSansCN-Bold;
        font-size: 12px;
        background: #F5F6F7;

        th {
            background: #F5F6F7;
        }
    }

    .tag-colour {
        width: 14px;
        height: 14px;
        border-radius: 4px 4px 4px 4px;
    }

    .actions {
        display: flex;
        align-items: center;

        button {
            @include SourceHanSansCN-Regular;
        }

        .line {
            width: 1px;
            height: 14px;
            background: #EEEFF0;
            margin: 0px 8px;
        }

        .button-danger {
            color: #FF194C;
        }
    }

    .know-tag-page-box {
        display: flex;
        justify-content: end;
        margin-top: 8px;
    }
}

.tag-dialog-body {
    padding: 24px 32px;

    ::v-deep(.el-input) {
        .el-input__wrapper {
            background: #F5F6F7 !important;
            box-shadow: none !important;

            &::-webkit-input-placeholder {
                font-size: .875rem;
                color: #6f7588;
                @include SourceHanSansCN-Regular;
            }
        }
    }

    .colour-boxs {

        // display:grid;
        // grid-template-columns: 72px 1fr;
        // grid-column-gap: 16px;
        // .checked-colour{
        //     width: 72px;
        //     height: 72px;
        //     border-radius: 4px;
        // }
        .colour-items {
            display: grid;
            grid-template-columns: repeat(9, 32px);
            grid-column-gap: 16px;
            grid-row-gap: .5rem;

            .colour-item {
                width: 32px;
                height: 32px;
                border-radius: 4px;
                cursor: pointer;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;

                .checked-icon {
                    color: #fff;
                    font-size: 24px;
                }
            }

            .active {
                border: 1px solid #1E6FFF;
            }
        }
    }
}
</style>